<template>
     <el-form :inline="false" :model="form" label-width="auto" style="padding: 10px;">
       <el-form-item label="原始密码">
         <el-input v-model="form.oldPassword" type="password" show-password/>
       </el-form-item>
       <el-form-item label="密码">
         <el-input v-model="form.password" type="password" show-password/>
       </el-form-item>
       <el-form-item label="确认密码">
         <el-input v-model="form.password2" type="password" show-password/>
       </el-form-item>
          <div style="text-align:center;margin: 10px auto;">
            <el-button type="primary" @click="handleChangePassword">修改密码</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>
</template>
<script>
    import{reactive, ref} from 'vue'
    import {add,edit,loginUser,changePwd} from '/http/sys-user.js'
    import cmeditor from "../../component/cmeditor.vue";
    const {ElMessage,ElMessageBox} = ElementPlus;
    export default {
      components: {cmeditor},
        props:{
          initParams:Object
        },
        setup(props,context){
            const form=reactive({
              oldPassword:'',
              password:'',
              password2:''
            })
          const handleChangePassword = ()=>{
              if(form.password){
                if(!form.oldPassword){
                  ElMessage.error("请输入原始密码")
                  return;
                }
                if(form.password!==form.password2){
                  ElMessage.error("两次密码输入不一至")
                  return;
                }
              }
            changePwd(form).then(res=>{
              if(res.data.code===200){
                ElMessage.success("密码修改成功")
                context.emit('close',false)
              }else{
                ElMessage.success(res.data.msg)
              }
            })
          }


          const handleEdit = ()=>{
              context.emit('close',false)
          }

          const handleCancel = ()=>{
            context.emit('close',false)
          }

          onMounted(()=>{
              Object.assign(form,props.initParams)
          })


          return{
            form,handleChangePassword,handleEdit,handleCancel
          }
        }
    }
</script>

<style scoped>
.el-form .el-select {
  width: 192px; /* 或者根据需要设置其他宽度 */
}
.vertical-radio .el-radio {
  display: block;
  margin-bottom: 10px; /* 可根据需要调整间距 */
}
.header {
  font-size: 16px;
  border-top: #f0f0f0 solid 1px;
  margin: 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
</style>